<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script>
        //定义数组来接收市
        var arr1=["海淀区","顺义区","西城区","怀柔区"];
        var arr2=["石家庄","承德","保定","廊坊","唐山"];
        var arr3=["济南","青岛","威海","日照","枣庄"];
        var arr4=["安阳","许昌","洛阳","郑州"];
        var city=[arr1,arr2,arr3,arr4];
        onload=function () {
            //获取到各个省份的下拉框
            document.getElementById("provied").onchange=function () {
          var crtyid= document.getElementById("crtyid");
         crtvid.innerHTML="";
         var value=this.value;
         //获取选中的省区
                var value=this.value;
                //拿着选中的省区匹配对应的市
                var citys=city[value];
                //循环遍历
                for (var i = 0; i <citys.length;i++){
                    //获取到市的下拉框将内容放进去
                    crtvid.innerHTML+="<option>"+citys[i]+"</option>"
                }

            }

        }

        </script>

</head>
<body>
<select id="provied">

    <option value="0">北京</option>
    <option value="1">河北</option>
    <option value="2">山东</option>
    <option value="3">河南</option>
</select>
<select id="crtvid">
    <option >请选择市</option>
</select>
</body>
</html>